<template>
  <transition name = "fade" @after-leave = "afterLeave" @after-enter = "afterEnter">
    <div
      v-show = "isVisible"
      class="video_box"
      @mouseenter = "clearTimer"
      @mouseleave = "createTimer"
      @mousedown.stop.prevent="mouseDown"
      :style = "style">
      <div class="title" @mousedown="mouseDown">
        <div class="row"><span>设备名称:</span>{{ videoDetail.title }}</div>
        <div class="row"><span>设备编号:</span>{{ videoDetail.din }}</div>
      </div>
      <resize-box class="resize_box">
        <rtmp
        :id="`id_test_video_${videoDetail.din}`"
        class="video_player"
        :m3u8Src="videoDetail.m3u8Src"
        :src="videoDetail.url"
        :isRtmp="isRtmp"
        :autoplay="true"
        ></rtmp>
      </resize-box>
      <div class = "btn" :class="{'cha': !btn}" @mousedown.stop.prevent @click.stop.prevent = "handleClose">{{btn || ''}}</div>
    </div>
  </transition>
</template>

<script>
import resizeBox from '@/components/resizeBox'
import rtmp from '../rtmp'
export default {
  components: {
    rtmp,
    resizeBox
  },
  name: 'videoBox',
  props: {
    videoDetail: {
      type: Object,
      required: true
    },
    isRtmp: {
      type: Boolean,
      default: true
    },
    btn: {
      type: String,
      default: ''
    }
  },
  computed: {
    videoAttr () {
      return {
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoplay: true, // 如果true,浏览器准备好时开始回放。
        controls: true, // 控制条
        preload: 'auto', // 视频预加载
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: 'application/x-mpegURL',
          src: this.videoDetail.url

        }],
        poster: "", // 你的封面地址
        width: document.documentElement.clientWidth,
        notSupportedMessage: '此视频暂无法播放，请稍后再试' // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
      }
    },
    style () {
      return {
      }
    }
  },
  data () {
    return {
      isVisible: false,
      x: 0,
      y: 0
    }
  },
  methods: {
    mouseDown (e) {},
    handleClose: function (e) {
      if(e) {
        e.preventDefault()
      }
      this.$emit('close')
    },
    afterLeave () {
      this.$emit('closed')
    },
    clearTimer () {},
    createTimer () {}
  }
}
</script>
<style lang="scss">
  .resize_box {
    min-width: 200PX;
    min-height: 120PX;
    width: 650px;
    height: 366px;
    /deep/ .vcp-player {
      position: unset;
    }
    /deep/ video {
      display: block;
      margin: auto;
      position: absolute;
      max-height: 100%;
      max-width: 100%;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
  }
  .video_box{
    display: flex;
    color:#fff;
    align-items: center;
    // padding:16px 18px;
    padding-top: 110px;
    box-sizing: border-box;
    flex-wrap: wrap;
    position: absolute;
    // bottom: 495px;
    // left: 680px;
    left: 680px;
    top: 160px;
    border: 1px solid #3196fa;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 5px 3px -1px rgba(0,0,0,0.2), 0 6px 10px 0 rgba(0,0,0,0.2);
    // transition-delay: 0.2s;
    .title {
      max-width: calc(100% - 110px);
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      height: 110px;
      padding: 10px 20px;
      box-sizing: border-box;
      font-size: 28px;
      .row {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      span {
        color: #ccc;
        margin-right: 6px;
      }
    }
    .video_player {
      z-index: 1;
    }
    &::after{
      content: "";
      width: 100%;
      height: 100%;
      display: block;
      // background: url('~@/assets/img/video_bg.png') no-repeat;
      background-color: #0e2a46;
      backdrop-filter: blur(30px);
      background-size: 100% 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
    }
    .content{
      padding:0;
    }
    .btn{
      cursor:pointer;
      color:#fff;
      position: absolute;
      text-align: center;
      font-size: 14px;
      width: 110px;
      height: 110px;
      border-radius: 8px;
      background-color: rgba($color: #3196fa, $alpha: 0.2);
      backdrop-filter: blur(30px);
      display: flex;
      align-items: center;
      justify-content: center;
      top: 0;
      right: 0;
      z-index: 1;
    }
  }
  .fade-enter-active, .fade-leave-acitve {
    transform:scaleX(1);
    transition: all 0.2s ease-in;
    transition-delay: 0.2s;
  }
  .fade-enter, .fade-leave-to{
    transform:scaleX(0);
  }
</style>
